<template>
  <div class="app">
    counter: {{ state.counter }}
    <button @click="changeCounter">changeCounter</button>
    <hr />
    number: {{ number }}
    <button @click="changeNumber">changeNumber</button>
  </div>
</template>
<script>
//  watchEffect 开启立即执行,并侦听数据
//  watchEffect 参数1 是一个副作用函数
//  watchEffect 返回一个函数的调用，可以用于停止侦听

import { reactive, ref, watch } from 'vue'

export default {
  setup() {
    const state = reactive({
      counter: 100
    })
    const number = ref(200)

    const changeCounter = () => {
      state.counter++
    }
    const changeNumber = () => {
      number.value++
    }

    watch(
      () => state.counter,
      (counter, preCounter) => {
        console.log(counter, preCounter)
      }
    )

    watch(
      number,
      (number, preNumber) => {
        console.log(number, preNumber)
      },
      { deep: true, immediate: true }
    )
    return {
      state,
      changeCounter,
      number,
      changeNumber
    }
  }
}
</script>
<style lang="scss" scoped></style>
